<template>
    <ul class="sidenavitem2" ref="ul" :style="itemStyle">
      <slot></slot>
    </ul>
</template>

<script>

export default {
  name: "ItemBox",
  data() {
    return {
      height:null,
      release:true
    };
  },
  props:{
    isOpen:{
      type:Boolean
    }
  },
  mounted(){
    this.height=this.$refs.ul.clientHeight
    this.$nextTick(()=>{
      this.release=false
    });
  },
  computed:{
    itemStyle(){
      if(this.isOpen||this.release){
        return{
          height:this.height==null?"":`${this.height}px`
        }
      }
      else{
        return{
          height:"0px"
        }
      }
    }
  }
};
</script>

<style scoped>
.sidenavitem2 {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: height 0.3s ease;
}
</style>
